{% extends "base.html" %}

{% block title %}导入数据 - 提示词管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>
                <i class="bi bi-upload"></i> 
                导入数据
            </h1>
            <a href="{{ url_for('index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> 返回首页
            </a>
        </div>
    </div>
</div>

<!-- 错误提示横幅 -->
<div id="errorBanner" class="alert alert-danger d-none" role="alert">
    <i class="bi bi-exclamation-triangle"></i>
    <span id="errorMessage">JSON格式错误</span>
</div>

<!-- 成功提示横幅 -->
<div id="successBanner" class="alert alert-success d-none" role="alert">
    <i class="bi bi-check-circle"></i>
    <span id="successMessage">JSON格式正确</span>
</div>

<div class="row">
    <div class="col-md-8">
        <!-- 导入数据卡片 -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-upload"></i> 导入数据
                </h5>
            </div>
            <div class="card-body">
                <form method="POST" enctype="multipart/form-data" id="importForm">
                    <div class="mb-3" id="fileUploadSection">
                        <label for="file" class="form-label">选择JSON文件</label>
                        <input type="file" class="form-control" id="file" name="file" accept=".json">
                        <div class="form-text">
                            请选择JSON格式的数据文件，系统将自动验证和格式化内容
                        </div>
                    </div>
                    
                    <!-- JSON内容预览和编辑区域 -->
                    <div class="mb-3" id="jsonPreviewSection" style="display: none;">
                        <label for="jsonContent" class="form-label">JSON内容预览与编辑</label>
                        <textarea class="form-control" id="jsonContent" name="json_content" rows="15" style="font-family: 'Courier New', monospace;"></textarea>
                        <div class="form-text">
                            <span class="text-info">可以直接编辑JSON内容，修改后点击导入将保存编辑后的内容</span>
                        </div>
                    </div>
                    
                    <!-- 隐藏字段用于标识导入方式 -->
                    <input type="hidden" id="importMode" name="import_mode" value="file">
                    
                    <!-- 文件标题字段（当使用JSON内容导入时） -->
                    <div class="mb-3" id="titleSection" style="display: none;">
                        <label for="title" class="form-label">导入标题</label>
                        <input type="text" class="form-control" id="title" name="title" placeholder="请输入导入数据的标题">
                        <div class="form-text">
                            此标题将作为导入数据的名称
                        </div>
                    </div>
                    
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="button" class="btn btn-outline-secondary" id="formatJsonBtn" style="display: none;">
                            <i class="bi bi-code"></i> 格式化JSON
                        </button>
                        <button type="submit" class="btn btn-primary" id="importBtn">
                            <i class="bi bi-upload"></i> 导入数据
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">

        
        <!-- 验证功能说明 -->
        <div class="card mb-3">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="bi bi-shield-check"></i> 
                    验证功能
                </h6>
            </div>
            <div class="card-body">
                <h6>自动检测</h6>
                <ul class="small">
                    <li>实时JSON语法验证</li>
                    <li>错误行号定位</li>
                    <li>详细错误信息提示</li>
                    <li>自动格式化功能</li>
                </ul>
                
                <h6>错误提示</h6>
                <ul class="small">
                    <li>语法错误：缺少逗号、括号等</li>
                    <li>格式错误：字符串未加引号等</li>
                    <li>结构错误：缺少必要字段等</li>
                </ul>
            </div>
        </div>
        
        <!-- 导入说明 -->
        <div class="card">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="bi bi-info-circle"></i> 
                    导入说明
                </h6>
            </div>
            <div class="card-body">
                <h6>导入流程：</h6>
                <ol class="small">
                    <li>选择JSON文件</li>
                    <li>系统自动验证格式</li>
                    <li>可编辑和格式化内容</li>
                    <li>确认无误后导入</li>
                </ol>
                
                <h6>注意事项：</h6>
                <ul class="small">
                    <li>文件名将作为导入记录标题</li>
                    <li>导入前会进行完整性检查</li>
                    <li>支持批量导入提示词和分类</li>
                </ul>
                
                <div class="alert alert-info mt-3">
                     <i class="bi bi-info-circle"></i>
                     <strong>提示：</strong>导入JSON文件将创建新的提示词，不会影响现有数据
                 </div>
            </div>
        </div>
    </div>
</div>

<script>
// JSON验证和格式化功能
let jsonEditor = null;

function validateJSON(jsonString) {
    try {
        const parsed = JSON.parse(jsonString);
        return { valid: true, data: parsed, error: null };
    } catch (e) {
        return { valid: false, data: null, error: e };
    }
}

function formatJSON() {
    const textarea = document.getElementById('jsonContent');
    const content = textarea.value.trim();
    
    if (!content) {
        showError('请先输入JSON内容');
        return;
    }
    
    const result = validateJSON(content);
    if (result.valid) {
        const formatted = JSON.stringify(result.data, null, 2);
        textarea.value = formatted;
        showSuccess('JSON格式化成功');
        clearError();
    } else {
        showJSONError(result.error);
    }
}

function showJSONError(error) {
    const errorBanner = document.getElementById('errorBanner');
    const errorMessage = document.getElementById('errorMessage');
    
    let errorMsg = 'JSON格式错误：';
    if (error.message.includes('Unexpected token')) {
        errorMsg += '语法错误，请检查括号、逗号、引号是否正确';
    } else if (error.message.includes('Unexpected end')) {
        errorMsg += '内容不完整，请检查是否缺少结束符';
    } else {
        errorMsg += error.message;
    }
    
    errorMessage.textContent = errorMsg;
    errorBanner.classList.remove('d-none');
    errorBanner.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

function clearError() {
    const errorBanner = document.getElementById('errorBanner');
    errorBanner.classList.add('d-none');
}

function showError(message) {
    const errorBanner = document.getElementById('errorBanner');
    const errorMessage = document.getElementById('errorMessage');
    errorMessage.textContent = message;
    errorBanner.classList.remove('d-none');
}

function showSuccess(message) {
    const successBanner = document.getElementById('successBanner');
    const successMessage = document.getElementById('successMessage');
    successMessage.textContent = message;
    successBanner.classList.remove('d-none');
    
    // 3秒后自动隐藏
    setTimeout(() => {
        successBanner.classList.add('d-none');
    }, 3000);
}

function handleFileSelect(event) {
    const file = event.target.files[0];
    if (!file) {
        // 如果没有选择文件，隐藏预览区域
        hideJsonPreview();
        return;
    }
    
    // 显示JSON预览区域
    showJsonPreview();
    
    // 设置导入模式为文件模式
    document.getElementById('importMode').value = 'file';
    
    // 读取文件内容
    const reader = new FileReader();
    reader.onload = function(e) {
        const content = e.target.result;
        const jsonTextarea = document.getElementById('jsonContent');
        jsonTextarea.value = content;
        
        // 设置文件名作为默认标题
        const titleInput = document.getElementById('title');
        const fileName = file.name.replace(/\.[^/.]+$/, ""); // 移除扩展名
        titleInput.value = fileName;
        
        // 标记为原始内容（未编辑）
        jsonTextarea.dataset.originalContent = content;
        jsonTextarea.dataset.isModified = 'false';
        
        // 自动验证JSON
        const result = validateJSON(content);
        if (result.valid) {
            clearError();
            showSuccess('JSON文件读取成功，格式正确');
        } else {
            showJSONError(result.error);
        }
    };
    
    reader.onerror = function() {
        showError('文件读取失败');
    };
    
    reader.readAsText(file, 'UTF-8');
}

function showJsonPreview() {
    const previewSection = document.getElementById('jsonPreviewSection');
    const formatBtn = document.getElementById('formatJsonBtn');
    const titleSection = document.getElementById('titleSection');
    
    previewSection.style.display = 'block';
    formatBtn.style.display = 'inline-block';
    titleSection.style.display = 'block';
}

function hideJsonPreview() {
    const previewSection = document.getElementById('jsonPreviewSection');
    const formatBtn = document.getElementById('formatJsonBtn');
    const titleSection = document.getElementById('titleSection');
    
    previewSection.style.display = 'none';
    formatBtn.style.display = 'none';
    titleSection.style.display = 'none';
    
    // 清空内容
    document.getElementById('jsonContent').value = '';
    document.getElementById('title').value = '';
    
    // 重置导入模式
    document.getElementById('importMode').value = 'file';
}

function realTimeValidation() {
    const textarea = document.getElementById('jsonContent');
    const content = textarea.value.trim();
    
    if (!content) {
        clearError();
        return;
    }
    
    // 检查内容是否被修改
    const originalContent = textarea.dataset.originalContent || '';
    const isModified = content !== originalContent.trim();
    
    // 更新修改状态
    textarea.dataset.isModified = isModified.toString();
    
    // 如果内容被修改，切换到JSON内容导入模式
    if (isModified) {
        document.getElementById('importMode').value = 'json_content';
        // 确保标题字段可见
        const titleSection = document.getElementById('titleSection');
        const titleInput = document.getElementById('title');
        titleSection.style.display = 'block';
        
        // 如果标题为空，使用默认标题
        if (!titleInput.value.trim()) {
            titleInput.value = '编辑后的JSON数据';
        }
    } else {
        // 内容未修改，保持文件导入模式
        document.getElementById('importMode').value = 'file';
    }
    
    // JSON格式验证
    const result = validateJSON(content);
    if (result.valid) {
        clearError();
    } else {
        showJSONError(result.error);
    }
}

// 表单提交验证
function validateForm() {
    const importMode = document.getElementById('importMode').value;
    const titleInput = document.getElementById('title');
    const jsonContent = document.getElementById('jsonContent').value.trim();
    const fileInput = document.getElementById('file');
    
    // 如果是JSON内容导入模式，验证JSON格式
    if (importMode === 'json_content' && jsonContent) {
        const result = validateJSON(jsonContent);
        if (!result.valid) {
            showJSONError(result.error);
            return false;
        }
    }
    
    return true;
}

// 绑定事件监听器
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('file');
    const jsonTextarea = document.getElementById('jsonContent');
    const formatBtn = document.getElementById('formatJsonBtn');
    const importForm = document.getElementById('importForm');
    
    if (fileInput) {
        fileInput.addEventListener('change', handleFileSelect);
    }
    
    if (jsonTextarea) {
        // 实时验证（延迟执行避免频繁验证）
        let timeout;
        jsonTextarea.addEventListener('input', function() {
            clearTimeout(timeout);
            timeout = setTimeout(realTimeValidation, 500);
        });
    }
    
    if (formatBtn) {
        formatBtn.addEventListener('click', formatJSON);
    }
    
    // 表单提交验证
     if (importForm) {
         importForm.addEventListener('submit', function(e) {
             if (!validateForm()) {
                 e.preventDefault();
                 return false;
             }
         });
     }
 });
</script>

{% endblock %}